<template>
  <div class="imgtext">
    <dl>
      <dt></dt>
      <dd class="write">
        <span @click="$router.push({path})">编辑</span>
        <span>认证</span>
      </dd>
      <dd class="progress">
        <p>
          完成度 ：
          <span>8</span>分
        </p>
        <p>
          <span id="progress" :style="`width:65%`"></span>
        </p>
      </dd>
    </dl>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: ["path"],
});
</script>
<style scoped>
.imgtext {
  background: white;
  height: 120px;
}
.imgtext dl dt {
  float: left;
  width: 150px;
  height: 100px;
  margin: 10px 20px 10px 10px;
  background: black;
  border-radius: 15px;
}
.progress {
  height: 5px;
  margin: 15px 0;
  width: 45%;
  position: absolute;
  right: 25px;
  top: 105px;
}
.progress p:nth-child(2) {
  border: 1px solid rgba(174, 174, 174, 1);
  height: 5px;
}
#progress {
  display: inline-block;
  height: 5px;
  position: absolute;
  background: rgba(174, 174, 174, 1);
}
.write span {
  display: inline-block;
  margin: 15px 8px;
  padding: 5px 15px;
  background: skyblue;
  border-radius: 5px;
  color: white;
}
</style>